<template>
        <div>
              <user-header></user-header>
            <div class="info-main">
                <user-center></user-center>
                <div class="info-table">
                        <div class="table-text">订单管理</div>
                        <ul class="table-top">
                            <li>
                                <a href=""><img src="../../static/images/icon-dingdan1.png" alt="">
                                <br>
                                代付款(2)</a>
                            </li>
                            <li><a href="">
                                 <img src="../../static/images/icon-dingdan1.png" alt="">
                                <br>
                                已完成(2)</a></li>
                            <li><a href="">
                                <img src="../../static/images/icon-dingdan1.png" alt="">
                                <br>
                                运送中(2)</a></li>
                            <li><a href="">
                                <img src="../../static/images/icon-dingdan1.png" alt="">
                                <br>
                                派送中(5)</a></li>
                        </ul>
                        <table class="table-main">
                            <thead>
                            <tr>
                                <th>商品</th>
                                <th>单价(元))</th>
                                <th>数量()</th>
                                <th>实付款(元)</th>
                                <th>订单状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                           
                            <tbody>
                                <tr>
                                    <td colspan="6">下单时间：2015-12-3 | 订单号：445454654654654
                                        <em></em>
                                    </td>
                                </tr>
                               <!-- <tr class="tr-fade">
                                    <td colspan="3">
                                        <table class="two-table">
                                            <tr >
                                                <td>
                                                        <a href=""><img style="width:80px;height:80px;" src="../../static/products/p_2.jpg" alt="">
                                                        </a>
                                                        <a href="">天然绿色无污染水蜜桃</a>
                                                        <p>礼盒装20个/盒</p>
                                                 </td>
                                                <td>5</td>
                                                <td>2</td>
                                            </tr>
                                                
                                        </table>
                                    </td> 
                                    <td>100</td>
                                    <td>已发货，待收货</td>
                                    <td>
                                        <a href="">查看详细</a>
                                        <br>
                                        <a href="">删除</a>
                                    </td>
                                </tr>  -->
                            </tbody>
                             
                             <tbody>
                                <tr>
                                    <td colspan="6">下单时间：2015-12-3 | 订单号：445454654654654 <em></em></td>
                                </tr>
                                <tr>
                                    <td colspan="3"></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                              <tbody>
                                <tr>
                                    <td colspan="6">下单时间：2015-12-3 | 订单号：445454654654654 <em></em></td>
                                </tr>
                            </tbody>
                              <tbody>
                                <tr>
                                    <td colspan="6">下单时间：2015-12-3 | 订单号：445454654654654 <em></em></td>
                                </tr>
                               
                            </tbody>
                              <tbody>
                                <tr>
                                    <td colspan="6">下单时间：2015-12-3 | 订单号：445454654654654 <em></em></td>
                                </tr>
                               
                            </tbody>
                        
                        </table>
                        <ul>
                            <li></li>
                        </ul>
                         <div class="footer-list">
                    <ul>
                        <li>首页</li>
                        <li><上一页</li>
                        <li style="background:blue">1</li>
                        <li>2</li>
                        <li class="list-number">3</li>
                        <li class="list-number">4</li>
                        <li>下一页></li>
                        <li>尾页</li>
                    </ul>
            </div>
                </div>
               
            </div>
            <!-- **************************************************-->
            
           <div><user-footer></user-footer></div> 
        </div>
</template>
<script>
import userheader from './header';
import userfooter from './footer';
import usercenter from './user-center';
    export default{
        data:function(){
            return{}
        },
        components:{'user-header':userheader,'user-footer':userfooter,'user-center':usercenter},
        mounted:{}
    };
</script>
<style scoped>
/* .footer-list>.list-number{
    padding:8px 13px;
} */
.footer-list{
    width:1000px;
   
   
   
}
.footer-list ul{float:left;margin-left:100px;margin-top:50px;}
.footer-list ul li{
    float:left;
   border:1px solid grey;
    font-size:14px;
    margin-left:25px;
    padding:8px 20px;
   
}
.footer-list ul li:hover{
    background:red;
    color:blue;
}

.info-main{
   
    width:100%;
     height:600px; 
    
}
.info-table{
   width:1000px;height:auto; /* border:1px solid grey; */
    float:left;margin-left:20px;margin-top:40px;}
    .table-text{
        
        float:left;
        font-size:20px;
        padding:10px 20px;
        font-weight:bold;
        border-bottom:5px solid red;
    }
     
.table-top{float:left;border:1px solid gray;margin:0;margin-top:0px;width:100%;}
.table-top>li{float:left;text-align:center;
    margin:0;
    margin-left:5px;
    padding:10px 88px;
    background:#e5e5e5;
}
.table-main{width:1000px;/*border-collapse: collapse;*/} 
.table-main thead {background:#ddd;}
.table-main thead tr th:nth-child(n){
    width:80px;
    height:40px;
   
    text-align:center;
}
.table-main thead tr th:nth-child(1){
   width:350px;
    text-align:center;
}
.table-main>tbody >tr:first-child>td{ background: #ECFBD7;line-height: 40px;
    border-top:1px solid gray;
    text-align:left;
}
.table-main>tbody >tr>td{
    text-align:center;
    border-left:1px solid grey;
}
.table-main>tbody >tr:first-child td em{
     display: block;
    width:40px;
    height:32px;
    background:url(../../static/images/icoAdd.png) 16px 12px no-repeat ;
    float:right;
    
}
.two-table tr{
    border:1px solid grey;
}
.two-table tr td:nth-child(n){
    width:100px; 
    text-align:center;
}
.two-table tr td:first-child{
    width:500px;
    text-align:left;
}
.list-number{
    
}


    
   


</style>
